import React, { Component } from 'react'
import './site.scss'
import City from './city'
import {connect} from 'react-redux'
import axios from 'axios'
import {Toast} from 'antd-mobile'

let tel=/^(1[3-9])([0-9]{9})$/

function showToast(value) {
  Toast.info(value, 1);
}
 class Site extends Component {
  constructor(props) {
    super(props)
    this.state = {
      id: 0,
      show: false,
      name:'',
      photo:'',
      site:'',
      pp:false,
      data:[]
      // cityValue:''
    }
    if(!JSON.parse(localStorage.getItem('loginId'))){
      props.history.push('/login')
    }
  }

  render() {
    let com = this.change()
    // if(!JSON.parse(localStorage.getItem('loginId'))){
      
    // }
    return com
  }
  change = () => {
    if (this.state.id === 0) {
      return <div className='mySite'>
        {this.state.data.length === 0 ? <div className='mySiteBox'>
          <img  alt='' src='//yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/noAddress-c73987af41.png' />
          <p>亲，新增收货地址哟</p>
        </div> :<div className='mySiteBox2'>
          {this.state.data.map((item,index) =>(
            <div key={index} className='myClist border-bottom'>
              <div><span>{item.username}</span></div>
              <div><span>{item.tel}</span><span>{item.site}</span></div>
              <span className='iconfont icon-icon_huabanfuben mycicon' onClick={()=>{this.deleteId(item)}}/>
            </div>
          ))}
          </div>}
        <div className='myaddSite' onClick={() => { this.setState({ id: 1 }) }}> <span>+</span> 新建地址</div>
      </div>
    } else if (this.state.id === 1) {
      return <div className='mySite'>
        <div className='mySiteBox1'>
          <div className='mySiteList border-bottom'><input placeholder='姓名' value={this.state.name}
          onChange={(e) =>{this.setState({name:e.target.value})}}/></div>
          <div className='mySiteList border-bottom'><input placeholder='手机号码'  value={this.state.photo}
          onChange={(e) =>{this.setState({photo:e.target.value})}}
          onBlur={(e) =>{if(!tel.test(e.target.value)){
            showToast('手机格式不对')
            this.setState({pp:false})
            return
          }
          this.setState({pp:true})
          }}/></div>
          <div className='mySiteList border-bottom'><input className='mySiteListinupt' placeholder='省份、城市、县区'
            value={ this.props.sheng+this.props.shi+this.props.qu}
            onFocus={() => { this.setState({ show: true }) }}
            onChange={(e) => {
              // this.setState({ cityValue: e.target.value })
              // this.debounce(this.scol,3000)()
            }}
            onBlur={() => {
              this.setState({ show: false })
            }} /></div>
          <div className='mySiteList border-bottom'><input placeholder='详细地址、如街道、楼盘'  value={this.state.site} onChange={(e) =>{this.setState({site:e.target.value})}} /></div>
        </div>
        {this.state.show === true ? <City /> : <div className='mySiteBottom'><p onClick={()=>{this.setState({id:0})}}>取消</p><p onClick={this.addCite}>保存</p></div>}
      </div>
    }
  }

  debounce = (fn, delay) => {
    if(!window.timer){
      window.timer = null
    }
    return () => {
        if (window.timer) {
            // 进入此分支说明：当前正在一个计时周期中，并且再次触发了事件,取消当前计时，重新开始计时
            clearTimeout(window.timer)
        }
        // 进入此分支说明：当前没有计时，则开始新的计时
        window.timer = setTimeout(fn, delay)
    }
  }
  scol = () =>{
    console.log(22)
  }
  deleteId=(item) =>{
    axios.post('http://10.36.149.139:9000/api/deleteid',{
      item
    })
    let a = this.state.data.filter((v) =>{
      return item !== v
    })
    this.setState({data:a})
  }


addCite=()=>{

  if(this.state.pp){
    this.setState({data:[...this.state.data,{site:this.props.sheng+this.props.shi+this.props.qu+this.state.site,username:this.state.name,tel:this.state.photo}],
      id:0})
    axios.post('http://10.36.149.139:9000/api/addsite',{
      usertel:JSON.parse(localStorage.getItem('loginId')).tel,
      site:{username:this.state.name,tel:this.state.photo,site:this.props.sheng+this.props.shi+this.props.qu+this.state.site}
    })
    return
  }
  showToast('信息请填写正确')
}           
  componentDidMount() {
    if(JSON.parse(localStorage.getItem('loginId'))){
      axios.post('http://10.36.149.139:9000/api/getsite',{
        tel:JSON.parse(localStorage.getItem('loginId')).tel
      }).then(({data}) =>{
        if(data.data.site){
          this.setState({data:data.data.site})
        }
      })
    }
    
  }
}

const mapStateToProps=(state) =>{
  return{
    sheng:state.getIn(['my','sheng']),
    shi:state.getIn(['my','shi']),
    qu:state.getIn(['my','qu'])

  }
}

const mapActionToProps=(dispatch)=>{
  return{
    changeSheng(value){
      dispatch({
        type:'changeSheng',
        value
      })
    },
    changeShi(value){
      dispatch({
        type:'changeShi',
        value
      })
    },
    changeQu(value){
      dispatch({
        type:'changeQu',
        value
      })
    }
  }
}


export default  connect(mapStateToProps,mapActionToProps)(Site)